<template>
  <div style="padding: 10px">
    <d-group-form
      ref="dGroupFormRef"
      v-model="formData"
      :formGroupConfig="formGroupConfig"></d-group-form>
    {{ formData }}
    <div style="margin-top: 20px">
      <d-button type="primary" @click="submit">提交</d-button>
      <d-button type="warning" @click="reset">重置</d-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'

  const formGroupConfig = ref([
    {
      group: '默认组',
      prop: 'default1',
      expand: true,
      class: 'group',
      formConfig: {
        class: 'flex',
        labelWidth: '100px',
        rules: {
          'default1.input': [{ required: true, message: '请输入内容', trigger: 'blur' }]
        }
      },
      formItemConfig: [
        { cType: 'input', label: '普通输入', prop: 'default1.input', class: 'w-33' },
        {
          cType: 'input',
          label: '最小值10',
          prop: 'min',
          config: { min: 10 },
          class: 'w-33'
        },
        { cType: 'date', label: '日期选择', prop: 'default1.date1', class: 'w-33' }
      ]
    },
    {
      group: '扩展组',
      prop: 'default',
      expand: true,
      formConfig: {
        labelWidth: '100px',
        rules: {
          date1: [{ required: true, message: '请选择日期', trigger: 'blur' }]
        }
      },
      formItemConfig: [
        { cType: 'input', label: '普通输入', prop: 'input' },
        { cType: 'date', label: '日期选择', prop: 'date1', class: 'w-full' }
      ]
    }
  ])
  const formData = ref({
    default1: {
      title1: '',
      input: '',
      date1: ''
    },
    min: '',
    input: '',
    date1: ''
  })

  const dGroupFormRef = ref()
  const submit = async () => {
    const res = await dGroupFormRef.value.validate()
    console.log('res: ', res)
  }
  const reset = () => {
    dGroupFormRef.value.resetFields()
  }
</script>
<style scoped lang="scss"></style>
<style>
  .flex {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .w-full {
    width: 100%;
  }
  .w-33 {
    width: 33%;
  }
  .group {
    margin-bottom: 10px;
    border-radius: 10px;
    overflow: hidden;
  }
</style>
